page {
  background-color: #23262D;
}

//顶部
.header {
  padding: 0 40rpx;
  display: flex;
  justify-content: space-between;

  .left-local {
    color: #DFDFDF;
    line-height: 60rpx;
    opacity: 0.78;
    font-size: 28rpx;
    color: #DFDFDF;
    display: flex;
    justify-content: space-between;

    image {
      width: 26rpx;
      height: 13rpx;
      margin-top: 26rpx;
      margin-left: 9rpx;
    }
  }

  .middle-search {
    width: 458rpx;
    height: 60rpx;
    background: #33363D;
    box-shadow: 0 0 16rpx 4rpx rgba(0, 0, 0, 0.33);
    border-radius: 52rpx;
    border-radius: 52rpx;

    image {
      width: 27rpx;
      height: 27rpx;
      margin-left: 24rpx;
      margin-top: 16rpx;
    }

    text {
      line-height: 60rpx;
      font-size: 28rpx;
      color: #7A7A7A;
      margin-left: 15rpx;
    }
  }

  .right-icon {
    image {
      margin-top: 12rpx;
      width: 37rpx;
      height: 37rpx;
    }
  }
}

//banner
.square-dot {
  width: 750rpx;
  height: 340rpx;
  margin-top: 34rpx;

  .item {
    width: 750rpx;
    height: 290rpx;

    image {
      width: 670rpx;
      height: 290rpx;
      border-radius: 18rpx;
    }
  }


}

// 轮播的小点
swiper.square-dot .wx-swiper-dot {
  background-color: #fff;
  opacity: 0.4;
  width: 10rpx;
  height: 10rpx;
  border-radius: 20rpx;
  margin: 0 8rpx !important;
}

swiper.square-dot .wx-swiper-dot.wx-swiper-dot-active {
  opacity: 1;
  width: 30rpx;
}


// 热映影片标题
.hot {
  width: 670rpx;
  height: 50rpx;
  line-height: 50rpx;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  margin-top: 44rpx;

  .left {
    display: flex;
    justify-content: space-between;

    .line {
      width: 8rpx;
      height: 34rpx;
      background-image: linear-gradient(90deg, #F26182 5%, #F1A064 100%);
      margin-top: 8rpx;
    }

    text {
      font-size: 36rpx;
      color: #DFDFDF;
      margin-left: 10rpx;
    }
  }

  .right {
    display: flex;
    justify-content: space-between;

    text {
      opacity: 0.78;
      font-size: 24rpx;
      color: #DFDFDF;
    }

    image {
      width: 22rpx;
      height: 12rpx;
      margin-top: 19rpx;
      margin-left: 10rpx;
      transform: rotate(-90deg);
    }
  }
}

//热门影片内容
.hot-con {
  display: flex;
  justify-content: space-between;
  overflow: auto;
  margin-top: 20rpx;

  .con-item {
    width: 180rpx;
    position: relative;
    margin-left: 50rpx;

    image {
      width: 180rpx;
      height: 244rpx;
      border-radius: 16rpx;
    }

    text {
      position: absolute;
      left: 10rpx;
      top: 210rpx;
      z-index: 99;
      font-size: 18rpx;
      color: #DFDFDF;
    }

    .title {
      margin-top: 12rpx;
      width: 150rpx;
      margin: 0 auto;
      text-align: center;
      font-size: 24rpx;
      color: #DFDFDF;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .buy {
      width: 100rpx;
      height: 44rpx;
      text-align: center;
      line-height: 44rpx;
      margin: 0 auto;
      background-image: linear-gradient(150deg, #F25B86 0%, #F1AC5E 100%);
      box-shadow: 0 8rpx 32rpx 0 rgba(0, 0, 0, 0.50);
      border-radius: 22rpx;
      font-size: 24rpx;
      color: #DFDFDF;
      text-shadow: 0 4rpx 8rpx rgba(49, 49, 49, 0.50);
      margin-top: 9rpx;
    }

    .date {
      text-align: left;
      margin-top: 4rpx;
      opacity: 0.55;
      font-family: PingFangSC-Regular;
      font-size: 24rpx;
      color: #DFDFDF;
    }
  }
}

//即将上映内容
.comming {
  margin-top: 56rpx;

  .comming-item {
    width: 240rpx;

    image {
      width: 240rpx;
      height: 324rpx;
    }

    .title {
      width: 200rpx;
      float: left;
      text-align: left;
      font-size: 28rpx;
      color: #DFDFDF;
    }

    .date {
      float: left;
    }
  }
}

// 精彩预告内容
.wonderful {
  display: flex;
  justify-content: space-between;
  overflow: auto;
  margin-top: 18rpx;
  margin-bottom: 50rpx;
  .won-item {
    width: 590rpx;
    margin-left: 42rpx;
    .img {
      height: 320rpx;
      width: 590rpx;
      border-radius: 24rpx;
      float: left;
    }

    .icon {
      width: 76rpx;
      height: 76rpx;
      background-color: #fff;
      border-radius: 38rpx;
      margin-top: -194rpx;
      margin-left: 258rpx;
      float: left;
    }

    .title {
      width: 540rpx;
      padding: 0 20rpx;
      display: flex;
      justify-content: space-between;
      opacity: 0.74;
      font-size: 20rpx;
      color: #FFFFFF;
      float: left;
      margin-top: -40rpx;
    }
  }

  .des {
    width: 590rpx;
    text-align: left;
    font-size: 26rpx;
    color: #DFDFDF;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 330rpx;
  }
}